import React from 'react';
import { Image } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import FlightSchedule from '../screens/Flightschedule';
import Home from '../screens/Home';
import Profile from '../screens/Profile';
import colors from '../Themes/Colors';
import useTranslation from '../i18n';
//import {t} from 'i18n-js';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const HomeStackScreen = () => {
  const { t } = useTranslation();

  return (
    <Stack.Navigator>
      <Stack.Screen
        options={{
          title: t('home'),
          headerStyle: [
            //NavigationStyles.header_statusBar,
            { backgroundColor: colors.header },
          ],
          headerTitleStyle: [
            //NavigationStyles.headerTitle,
            { color: colors.headerTitle },
          ],
        }}
        name="homestackscreen"
        component={Home}
      />
    </Stack.Navigator>
  );
};

const FlightScheduleStackScreen = () => {
  // const { t } = useTranslation();
  // return (
  //   <Stack.Navigator>
  //     <Stack.Screen
  //       options={{
  //         title: t('flightschedule'),
  //         headerStyle: [{ backgroundColor: colors.header }],
  //         headerTitleStyle: [{ color: colors.headerTitle }],
  //       }}
  //       name="profilestackscreen"
  //       name="flightschedulescreen"
  //       component={FlightSchedule}
  //     />
  //   </Stack.Navigator>
  // );
  return null;
};

const ProfileStackScreen = () => {
  const { t } = useTranslation();

  return (
    <Stack.Navigator>
      <Stack.Screen
        options={{
          title: t('profile'),
          headerStyle: [{ backgroundColor: colors.header }],
          headerTitleStyle: [{ color: colors.headerTitle }],
        }}
        name="profilestackscreen"
        component={Profile}
      />
    </Stack.Navigator>
  );
};

export default () => {
  const { t } = useTranslation();
  return (
    <Tab.Navigator
      initialRouteName={Home.routeName}
      backBehavior={'initialRoute'}
      inactiveColor="rgba(255,255,255,0.4)"
      activeColor={colors.surface}
      shifting={true}
      barStyle={{ backgroundColor: colors.primary }}
    >
      <Tab.Screen
        options={{
          tabBarIcon: ({ focused, color }) =>
            focused ? (
              <Image source={require('@/assets/images/tabhome.png')} />
            ) : (
              <Image source={require('@/assets/images/tabhomeunfocus.png')} />
            ),
          title: t('home'),
        }}
        name={Home.routeName}
        component={HomeStackScreen}
      />
      <Tab.Screen
        options={{
          tabBarIcon: ({ focused, color }) =>
            focused ? (
              <Image source={require('@/assets/images/flightfocus.png')} />
            ) : (
              <Image source={require('@/assets/images/flight.png')} />
            ),
          title: t('flightschedule'),
          // title: '航班动态',
        }}
        name={FlightSchedule.routeName}
        component={FlightScheduleStackScreen}
      />

      <Tab.Screen
        options={{
          tabBarIcon: ({ focused, color }) =>
            focused ? (
              <Image source={require('@/assets/images/tabmyfocus.png')} />
            ) : (
              <Image source={require('@/assets/images/tabmy.png')} />
            ),
          title: t('profile'),
        }}
        name={Profile.routeName}
        component={ProfileStackScreen}
      />
    </Tab.Navigator>
  );
};
// https://stackoverflow.com/questions/42542132/set-backgroundcolor-and-badge-for-tabnavigator-in-react-navigation
